<template>
  <div class="container topCards">
    <el-row :gutter="30">
      <el-col class="cardTransform1" :sm="12" :lg="6">
        <InfoCard
          id="userCount"
          name="用户数量"
          :value="8980"
          font-weight
        >
          <template v-slot:icon>
            <i class="fa fa-user-plus" style="color:#41B883"></i>
          </template>
        </InfoCard>
      </el-col>
      <el-col class="cardTransform2" :sm="12" :lg="6">
        <InfoCard
          id="orderCount"
          name="订单数量"
          :value="20934"
          font-weight
        >
          <template v-slot:icon>
            <i class="fa fa-wpforms" style="color: #ec6f2a"></i>
          </template>
        </InfoCard>
      </el-col>
      <el-col class="cardTransform3" :sm="12" :lg="6">
        <InfoCard
          id="userOrderCount"
          name="下单人数"
          :value="5098"
          font-weight
        >
          <template v-slot:icon>
            <i class="fa fa-user-circle-o" style="color: #409EFF"></i>
          </template>
        </InfoCard>
      </el-col>
      <el-col class="cardTransform4" :sm="12" :lg="6">
        <InfoCard
          id="priceCount"
          name="入账金额"
          :value="209304"
          font-weight
        >
          <template v-slot:icon>
            <i class="fa fa-money" style="color: #f1d579"></i>
          </template>
        </InfoCard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'
  import InfoCard from "@/components/infoCard/InfoCard.vue";

  export default defineComponent({
    name: "TopCards",
    components: {
      InfoCard
    }
  })
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    .fa{
      font-size: 6.8rem;
    }
    .el-col{
      margin-bottom: 2rem;
    }
  }
</style>
<style lang="scss">
  .topCards{
    .el-card__body{
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
</style>
